مهمترین نکات در توسعه‌با React

۷ الگوی کاربردی در React که باعث شدن تو فرانت‌اند حرفه‌ای‌تر بشم و احتمالاً باعث شدن لپ‌تاپم رو به دیوار نکوبم!

ساعت دو نصف شبه. من تا گردن توی کدی فرو رفتم که شبیه رشته های ماکارونی درهم‌ گره خورده!😩
وابستگی‌های useEffect داد می‌زنن، رابط کاربری مثل یه فیلم ترسناک ارزون قیمت چشمک می‌زنه، و یه رندر مرموز با هر نفس من دوباره اجرا می‌شه.

آشوب کلاسیک React. تا حالا اونجا بودی؟

قبلاً فکر می‌کردم توسعه‌دهنده بدی نیستم. ولی React منو نشوند سر جام... حسابی!

فهمیدم اینکه فقط useState رو بلد باشی و چندتا JSX بزنی، معنی‌اش این نیست که بلدی چیکار می‌کنی. یعنی فقط شروع کردی.
ولی اگه واقعاً می‌خوای یه اپلیکیشن قابل نگهداری و مقیاس‌پذیر بسازی، باید الگو بلد باشی—الگوی درست و حسابی.

اینا ۷ تا الگوی React هستن که یه تلنگر حسابی بهم زدن و شاید بتونن اعصاب تو رو هم نجات بدن!😊

۱. الگوی «کامپوننت به‌عنوان تابع، نه سطل زباله»

می‌دونی از چی حرف می‌زنم.

اون کامپوننتی که همه کار می‌کنه ، دیتا می‌گیره، UI رندر می‌کنه، منطق رو هندل می‌کنه، صفحه رو اسکرول می‌ده، یه قهوه هم برات می‌ریزه...

بس کن. جدی می‌گم!

یه کامپوننت باید یه کار رو درست انجام بده، نه ده تا کارو نصفه‌نیمه.

✅ راه‌حل:
جدا کن. انتزاع بساز. تکرار کن.

// Bad
function UserProfile() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchUser().then(setData);
  }, []);
  return <div>{data?.name}</div>;
}


// Better
function useUser() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchUser().then(setData);
  }, []);
  return data;
}
function UserProfile() {
  const user = useUser();
  return <div>{user?.name}</div>;
}

تفکیک مسئولیت‌ها (Separation of concerns) فقط برای بچه‌های بک‌اند نیست! فرانت‌اندی‌ها هم باید رعایتش کنن.

...

۲. «هوک‌ها فقط تابعن» — یه کشف حیاتی

یادته اولین بار useEffect رو دیدی چی فکر کردی؟
گفتی: "واو، چه تمیز و شیکه!"

بعدش سه تا useEffect، دوتا useState اضافه کردی و حالا یه کاسه باگ تحویل گرفتی!

بیا یه چیزو روشن کنیم:

هوک‌ها فقط تابعن.
می‌تونی خودت بنویسی. و باید هم بنویسی.

هوک‌های سفارشی (Custom Hooks) میان‌بُر کار توی React هستن. یه جور رمز تقلبن!

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return width;
}

💥 قابل استفاده‌ مجدد. تمیز. قابل فهم.

اگه هنوز هوک‌های سفارشی نمی‌نویسی، مثل اینه که تیکه‌های لگو رو همه‌جا روی زمین پخش کردی!

...

۳. اصل «State رو ببر بالا، ولی نه تا ایستگاه فضایی!»

آره، همه‌مون شنیدیم:

«State رو ببر بالا!»

خب، خوبه... ولی یه حدی داره!

اگه کامپوننت پدر، شکل مرکز فرماندهی ناسا رو گرفت، بدون زیادی بردیش بالا.

State رو نزدیک جایی نگه دار که واقعاً بهش نیاز داری.
فقط وقتی واقعاً لازمه، اونو به بالا منتقل کن.

قول می‌دم واسه کنترل یه دراپ‌داون، نیاز به استیت سراسری (global state) نداری!

۴. قانون طلایی: «ترکیب بهتر از پیکربندی»

از prop drilling خسته شدی؟ اون حالتی که انگار داری دنبال نفت تو دل کد می‌گردی؟ خوش اومدی به جمع ما!

راز خوشمزگی React چیه؟ ترکیب (composition).
ازش استفاده کن!

function Modal({ children }) {
  return <div className="modal">{children}</div>;
}

<Modal>
  <h2>Are you sure?</h2>
  <button>Yes</button>
  <button>No</button>
</Modal>

تمیز. انعطاف‌پذیر. بدون حرکات آکروبات با props.

کامپوننت تو باید مثل یه اجر لگوی خوش‌دست باشه، نه یه ستاره مرگ لگویی که فقط اعصاب خورد می‌کنه!

۵. نظریه‌ی داغ: «Render Props هنوز نمُردن!»

همه فکر می‌کنن از وقتی هوک‌ها اومدن، دیگه render props به تاریخ پیوستن.

ولی نه! هنوز هستن. یه گوشه نشستن، ریلکس، منتظر یکی‌ان که دوباره قدرت واقعیشون رو یادش بیاد.

function MouseTracker({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handleMouseMove = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);
  return render(pos);
}

// Use it like this
<MouseTracker render={({ x, y }) => <p>Mouse at {x}, {y}</p>} />

ابزارها رو فقط به این دلیل که مد نیستن دور نندازید.

۶. فریاد «Context برای تنظیمات هست، نه کل اپلیکیشن شما»

قول می‌دم اگه یه اپ دیگه ببینم که از Context برای همه‌چیز استفاده می‌کنه، از روی لج وارد Vue می‌شم!

Context برای تم‌ها، احراز هویت، زبان و چیزهایی که کم تغییر می‌کنن عالیه.

ولی اگه ازش برای پاس دادن state داینامیک که مرتباً آپدیت میشه استفاده می‌کنید؟

آماده باشید برای جهنم عملکرد!

برای این کار از کتابخانه‌های مدیریت state استفاده کنید. یا حتی بهتر، state محلی + props. آره، قدیمی ولی کار می‌کنه

۷. کشف «استفاده از useReducer برای state پیچیده»

وقتی state شما این‌طوری میشه:

const [state, setState] = useState({
  step: 1,
  error: null,
  loading: false,
  data: null,
});

useReducer فقط برای طرفدارای Redux نیست. این برای اونی که دوست داره کنترل همه‌چیز دست خودش باشه، طراحی شده.

function reducer(state, action) {
  switch (action.type) {
    case "NEXT_STEP":
      return { ...state, step: state.step + 1 };
    case "SET_ERROR":
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

احساس می‌کنی مثل یه جادوگری.
یا حداقل مثل کسی که دیگه نمی‌خواد از دیدن کد خودش گریه کنه.

در نهایت، کدی بنویس که وقتی از شب قبل گیر باشی، بتونی روش کار کنی!

این الگوها نه تنها منو تبدیل به یه توسعه‌دهنده بهتر React کردن،
بلکه باعث شدن کمتر عصبی بشم، بهره‌ورتر باشم و اعتماد به نفسم توی کد بیشتر بشه.

انعطاف‌پذیری React یه هدیه و یه نفرینه. می‌تونی انتزاعات زیبایی بنویسی... یا یه کوه آشغال آتشین بسازی.

الگوها رو استفاده کن. برای خودت در آینده کد بنویس.
و لطفاً ، از تِرنری‌ها به هم پیچیده اجتناب کن!

از اینکه تا انتهای این مقاله با من بودید، خیلی ممنونم!
امیدوارم نکات گفته شده به کارتون بیاد و توی پروژه‌های بعدیتون ازشون استفاده کنید. اگر سوالی داشتید یا نظرتون رو خواستید با من در میون بذارید، خوشحال می‌شم بشنوم.
منتظر نظرات شما هستم!